<template>
  <div class="mainPage">
    <div class="pc-faq faqPage">
      <div class="import-info">
        <img width="100%" height="130px" src="../../assets/image/users/aboutUs_img_banner_1.cd60bbc5.png" class="fag_pc">
        <div class="main-content">
          <div class="faq-main-content">
            <h2  class="faq-title" style="font-size:1rem;font-weight: 400;text-align:left;padding: 26px 12px 26px 0;">{{$t('help.help2333')}} </h2>
            
            <div  class="faqContent">
               
                <div @click="changeBtn(item , 'faq-' )" v-for="item in 25" :key="item" :class ="{orangeColor: item == numIiShow}" class="faqContent-item boldText"> {{$t('help.help'+(item + 1))}} 
                </div>
            
            </div>
       

          <section  style="margin-top: 2rem;">
            <div  :class ="{orangeColor: 1 == numIiShow}"  ref="abc2"  id="faq-1" class="faqContent-itemDetail">
              <span  class="boldText">  {{$t('fag.what')}}</span>
              <div   style="text-align: left; margin-top: 0.5rem;">
                <div >
                 {{$t('fag.Mottwebsite')}}
                   <br >
                    {{$t('fag.notOnly')}}
                  </div>
                </div>
            </div>

            <div :class ="{orangeColor: 2 == numIiShow}"  id="faq-2" class="faqContent-itemDetail">
              <span  class="boldText"> {{$t('fag.howfree')}}</span>
              <div   style="text-align: left; margin-top: 0.5rem;">
                <div >
                  <p >{{$t('fag.free01')}}</p>
                  <p >{{$t('fag.free02')}}</p>
                  <p >{{$t('fag.free03')}}</p>
                  <p >{{$t('fag.free04')}}</p>
                  <p >{{$t('fag.free05')}}<span @click="routerPath('/help')"  class="linkText">{{$t('fag.Learnmore')}}</span></p>
                </div>
              </div>
            </div>
            
            <div :class ="{orangeColor: 3 == numIiShow}"  id="faq-3" class="faqContent-itemDetail">
              <span  class="boldText"> {{$t('fag.Profile')}}</span>
              <div   style="text-align: left; margin-top: 0.5rem;">
                <div > {{$t('fag.Asamazon')}}
                  <a href="https://www.paypal.com/us/webapps/mpp/paypal-fees" @click="routerPath('/help')"  class="linkText">{{$t('fag.UserGuide')}}</a>
                </div>
              </div>
            </div>
            
            <div :class ="{orangeColor: 4 == numIiShow}"   id="faq-4" class="faqContent-itemDetail">
              <span  class="boldText"> {{$t('fag.refund233')}}</span>
              <div   style="text-align: left; margin-top: 0.5rem;">
                <div> {{$t('fag.Actually')}}<a href="https://www.paypal.com/us/webapps/mpp/paypal-fees" data-v-7e779bee="" class="linkText">{{$t('fag.Paypal')}}</a> <br > {{$t('fag.sign')}} </div>
              </div>
            </div>
            
            <div :class ="{orangeColor: 5 == numIiShow}"   id="faq-5" class="faqContent-itemDetail">
                <span  class="boldText"> {{$t('fag.rebiew')}}</span>
                <div   style="text-align: left; margin-top: 0.5rem;">
                  <div > {{$t('fag.vai')}}
                    <a  href="info@mottconsulting.co.jp" target="_blank" class="linkText">info@mottconsulting.co.jp</a>
                </div>
              </div>
            </div>
            
            <div :class ="{orangeColor: 6 == numIiShow}"   id="faq-6" class="faqContent-itemDetail">
                <span  class="boldText"> {{$t('fag.products')}}</span>
                <div   style="text-align: left; margin-top: 0.5rem;"><div >
                  <p > {{$t('fag.probably')}}</p>
                  <p >{{$t('fag.purchased')}}</p>
                  <p >{{$t('fag.store')}}</p>
                  <p >{{$t('fag.Purchasing')}}</p>
                  <p >{{$t('fag.probably')}}</p>
                  <p >{{$t('fag.enough')}}</p>
                  <p >{{$t('fag.over')}}</p>
                </div>
              </div>
          </div>
          
          <div :class ="{orangeColor: 7 == numIiShow}"  id="faq-7" class="faqContent-itemDetail">
            <span  class="boldText"> {{$t('fag.applied')}}</span>
            <div   style="text-align: left; margin-top: 0.5rem;">
              <div >{{$t('fag.prdoe')}} </div>
            </div>
          </div>
          
          <div :class ="{orangeColor: 8 == numIiShow}"   id="faq-8" class="faqContent-itemDetail">
            <span  class="boldText"> {{$t('fag.detect')}}</span>
            <div   style="text-align: left; margin-top: 0.5rem;"><div >
              <p > {{$t('fag.Cannotfind')}}</p>
              {{$t('fag.Whatto')}} <p >{{$t('fag.Confirm01')}} </p>
               <p > {{$t('fag.Confirm02')}}</p>
               <p > {{$t('fag.Confirm03')}} <img  src="..\..\assets\images\faq1.png" class="faqImg"></p>
               <p > {{$t('fag.question')}} <a  href="info@mottconsulting.co.jp" target="_blank" class="linkText">info@mottconsulting.co.jp</a> or <a  class="linkText">Messenger</a></p>
            </div>
          </div>
        </div>
        
        <div :class ="{orangeColor: 9 == numIiShow}"  id="faq-9" class="faqContent-itemDetail">
          <span  class="boldText"> {{$t('fag.refund')}}</span>
          <div   style="text-align: left; margin-top: 0.5rem;"><div >
              <p > {{$t('fag.needto')}}<a  href="info@mottconsulting.co.jp" target="_blank" class="linkText">info@mottconsulting.co.jp</a> or 
              <span  class="linkText">{{$t('fag.Messenger')}}</span></p> 
              <p > {{$t('fag.approves')}} <img  src="@/assets/images/cart10.png" class="faqImg"></p>
              <p > {{$t('fag.reviewdete')}}</p>
            </div>
          </div>
        </div>
        
        <div :class ="{orangeColor: 10 == numIiShow}"  id="faq-10" class="faqContent-itemDetail">
          <span  class="boldText"> {{$t('fag.whenpurchase')}}</span>
          <div   style="text-align: left; margin-top: 0.5rem;">
            <div > {{$t('fag.thecoupons')}}</div>
          </div>
        </div>
        
        <div :class ="{orangeColor: 11 == numIiShow}"  id="faq-11" class="faqContent-itemDetail">
          <span  class="boldText"> {{$t('fag.isover')}}</span>
          <div   style="text-align: left; margin-top: 0.5rem;">
            <div > {{$t('fag.apply')}} </div>
          </div>
        </div>
        
        <div :class ="{orangeColor: 12 == numIiShow}"   id="faq-12" class="faqContent-itemDetail">
            <span  class="boldText"> {{$t('fag.order')}}</span>
            <div   style="text-align: left; margin-top: 0.5rem;">
            <div >
              <p > {{$t('fag.designate')}} </p>
              <p > {{$t('fag.such')}} </p>
              <p > {{$t('fag.according')}} </p>
            </div>
          </div>
      </div>
      
      <div :class ="{orangeColor: 13 == numIiShow}"   id="faq-13" class="faqContent-itemDetail">
        <span  class="boldText"> {{$t('fag.toapprove')}}</span>
        <div   style="text-align: left; margin-top: 0.5rem;">
          <div > {{$t('fag.days')}}</div>
        </div>
      </div>
      
      <div :class ="{orangeColor: 14 == numIiShow}"  id="faq-14" class="faqContent-itemDetail">
        <span  class="boldText"> {{$t('fag.receiving')}}</span>
        <div   style="text-align: left; margin-top: 0.5rem;">
          <div >{{$t('fag.received')}}</div>
        </div>
      </div>
      
      <div :class ="{orangeColor: 15 == numIiShow}"  id="faq-15" class="faqContent-itemDetail">
        <span  class="boldText"> {{$t('fag.Mottwebsite')}}</span>
        <div   style="text-align: left; margin-top: 0.5rem;">
          <div >{{$t('fag.purchaseup')}}
          </div>
        </div>
      </div>
      
      <div :class ="{orangeColor: 16 == numIiShow}"  id="faq-16" class="faqContent-itemDetail">
        <span  class="boldText"> {{$t('fag.reviewlink')}}</span>
        <div   style="text-align: left; margin-top: 0.5rem;"><div >
          <p > {{$t('fag.AccountAnd')}} </p>
          <p > {{$t('fag.YourAmazon')}}</p><p >{{$t('fag.Andclick')}} </p>
          <p > {{$t('fag.reviewall')}} </p>
          </div>
        </div>
     </div>

    <div :class ="{orangeColor: 17 == numIiShow}"  id="faq-17" class="faqContent-itemDetail">
        <span  class="boldText">{{$t('fag.Average')}}</span>
        <div   style="text-align: left; margin-top: 0.5rem;">
          <div >
            <p >{{$t('fag.VerifiedReviews')}}</p>
            <p > {{$t('fag.appliedin')}}
              <br > {{$t('fag.Purchase01')}} <br >{{$t('fag.Purchase02')}} <br >{{$t('fag.reviewall')}}<br ></p>
            <p > {{$t('fag.Mottwebsite')}} </p>
         </div>
        </div>
    </div>
  
  <div :class ="{orangeColor: 18 == numIiShow}"  id="faq-18" class="faqContent-itemDetail">
    <span  class="boldText"> {{$t('fag.earnmy')}}</span>
    <div   style="text-align: left; margin-top: 0.5rem;">
      <div > {{$t('fag.Rewards01')}}
        <p > {{$t('fag.Subscribing01')}} </p>
        <p > {{$t('fag.Subscribing02')}} </p>
        <p > {{$t('fag.Subscribing03')}}</p>
        <p > {{$t('fag.Subscribing04')}} </p>
        <p > {{$t('fag.Subscribing05')}}</p>
        <p > {{$t('fag.Subscribing06')}}</p>
        <p > {{$t('fag.Subscribing07')}} </p>
        <p > {{$t('fag.Subscribing08')}}</p>
        <p > {{$t('fag.Subscribing09')}}</p>
        <p > {{$t('fag.Subscribing10')}}</p>
      </div>
    </div>
  </div>
  
  <div :class ="{orangeColor: 19 == numIiShow}"   id="faq-19" class="faqContent-itemDetail">
    <span  class="boldText"> {{$t('fag.deducted')}}</span>
    <div   style="text-align: left; margin-top: 0.5rem;">
      <div > {{$t('fag.deducted01')}} </div>
    </div>
  </div>
  
  <div :class ="{orangeColor: 20 == numIiShow}"  id="faq-20" class="faqContent-itemDetail">
    <span  class="boldText"> {{$t('fag.reviewmean')}}</span>
    <div   style="text-align: left; margin-top: 0.5rem;">
      <div > 
         {{$t('fag.withdraw')}}
      </div>
    </div>
  </div>

  <div :class ="{orangeColor: 21 == numIiShow}"  id="faq-21" class="faqContent-itemDetail">
    <span  class="boldText">  {{$t('fag.exchanged')}}</span>
    <div   style="text-align: left; margin-top: 0.5rem;">
      <div >       {{$t('fag.Points')}} </div>
    </div>
  </div>
  
  <div :class ="{orangeColor: 22 == numIiShow}"  id="faq-22" class="faqContent-itemDetail activeText">
    <span  class="boldText">       {{$t('fag.correctseller')}}</span>
    <div   style="text-align: left; margin-top: 0.5rem;">
      <div >       {{$t('fag.information')}}
      </div>
    </div>
  </div>
  
  <div :class ="{orangeColor: 23 == numIiShow}"  id="faq-23" class="faqContent-itemDetail">
      <span  class="boldText">       {{$t('fag.purchaseaverage')}}</span>
      <div   style="text-align: left; margin-top: 0.5rem;"><div >
        <p >       {{$t('fag.Increasepurchase')}} </p>
        <p > 
                {{$t('fag.evaluation')}} </p>
        <p >       {{$t('fag.Mottwebsite')}}
              <a  href="info@mottconsulting.co.jp" target="_blank" class="linkText">info@mottconsulting.co.jp</a>. </p>
      </div>
    </div>
  </div>

<div :class ="{orangeColor: 24 == numIiShow}"  id="faq-24" class="faqContent-itemDetail">
  <span  class="boldText">       {{$t('fag.Mottwebsitedifferent')}}</span>
  <div   style="text-align: left; margin-top: 0.5rem;">
    <div >       {{$t('fag.confirmwhether')}} </div>
  </div>
</div>

<div :class ="{orangeColor: 25 == numIiShow}"  id="faq-25" class="faqContent-itemDetail">
  <span  class="boldText">       {{$t('fag.affectmy')}}</span>
  <div   style="text-align: left; margin-top: 0.5rem;">
    <div >       {{$t('fag.Pleasecontact')}} <a  href="info@mottconsulting.co.jp" target="_blank" class="linkText">info@mottconsulting.co.jp</a>
     or 
     <a  class="linkText" href="https://www.messenger.com/login.php?next=https%3A%2F%2Fwww.messenger.com%2Ft%2F101392981845187%2F%3Fmessaging_source%3Dsource%253Apages%253Amessage_shortlink">     Messenger </a>      {{$t('fag.Subscribing10')}} 
    </div>
  </div>
</div>

</section>


          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'Fag',
  data(){
    return {
      numIiShow:0,
      helpNum:0,
      pathAll:null
    }
  },
  methods:{
    changeBtn(num , pathId){
      this.numIiShow = num
      console.log(num);
      console.log(this.numIiShow == num);
      console.log(pathId + num)
      this.pathAll = pathId + num
      console.log(this.pathAll)

      document.getElementById(this.pathAll).scrollIntoView({
        behavior: "smooth", //设置一个平滑的属性
      });

    },
    // 路由跳转
    routerPath(path){
      this.$router.push(path)
    }
  },
  created(){}
}
</script>

<style scoped>
  .mainPage{
    flex: 1;
    overflow-y: scroll;
    background: #f5f5f5;

  }
  .pc-faq{
    line-height: 1.5;
    font-size: 16px;
  }
  .faqPage{
    padding: 1rem;
    color: #1a1818
  }
  .import-info{
    width: 100%;
    position: relative;
  }
  .main-content{
    margin: 0rem;
  }
  .faq-main-content{
    background: #fff;
    padding: 1rem;
  }
  .pc-faq .faq-main-content .faq-title[data-v-2c13abe9] {
    font-size: 28px;
    color: rgb(0, 0, 0);
    font-family: Roboto-Regular, tahoma, arial, "Hiragino Sans GB", 微软雅黑, simsun, sans-serif;
    font-weight: 400;
    padding: 26px 12px 26px 0px;
    text-align: left;
  }
  .faqContent{
    font-size: .8rem;
    margin-top: 1rem;
    text-align: left;
  }
  .faqContent-item{
    margin: .5rem 0;
    cursor: pointer;
  }
  .boldText{
    font-weight: 700;
    /* text-align: left; */
  }
  .faqContent-item:hover{
    color: #ff5900;
  }
  .orangeColor{
    color: #ff5900; 
  }
  .faqContent-itemDetail{
    font-size: .75rem;
    margin: .5rem 0;
    text-align: left;
  }
  .linkText{
    color: #409eff!important;
    text-decoration: underline;
    cursor: pointer!important;
  }
  @media only screen and (max-width: 900px) {
		.fag_pc {
			display: none;
		}
    .faq .header-title{
    font-size: 1rem;
}
.faqImg{
  /* height: 10rem; */
  width: 100%;
}
	}
</style>